<template>
  <img class="flag-icon" :src="flagImage">
</template>

<script>
  const defaultImage = '';

  export default {
    name: 'Flag',
    props: {
      country: String,
    },
    data() {
      return {
        flagImage: defaultImage,
      };
    },
    async created() {
      // Auto generated pre build
      const flags = await import('../../../generated/flags');
      flags.lol = `${window.__BASE_PATH__}images/lol-US.png`;
      this.flagImage = flags[this.country];
    },
  };
</script>

<style lang="scss">
  .flag-icon {
    box-shadow: 1px 1px 1px 0 var(--color-navigation-dark);
    width: 20px;
  }
</style>
